<template>
  <fieldset>
    <legend>modal封装</legend>
    <modal :visible="visible" @on-cancel="cancel" @on-confirm="confirm"></modal>
    <button @click="showModal">点击显示模态框</button>
  </fieldset>
</template>

<script>
//引入
import modal from "./modal.vue";

export default {
  components: {
    modal,
  },
  data() {
    return {
      //弹窗默认不显示
      visible: false,
    };
  },
  methods: {
    //按钮点击事件，点击后弹窗出现
    showModal() {
      this.visible = true;
    },
    //点击取消，弹窗消失
    cancel() {
      this.visible = false;
    },
    //点击确认，弹窗消失
    confirm() {
      this.visible = false;
    },
  },
};
</script>
